.iot-sj-component {
  .radio {
    .switch {
      display: block;
      position: relative;
      background-color: black;
      width: 30px;
      height: 30px;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
      border-radius: 50%;
      padding: 20px;
      margin: 5px;
    }

    .switch input {
      display: none;
    }

    //   .switch input:checked + .button .light {
    //     animation: flicker 0.2s infinite 0.3s;
    //   }

    .switch input:checked+.button .shine {
      opacity: 1;
    }

    .switch input:checked+.button .shadow {
      opacity: 0;
    }

    .switch .button {
      transition: all 0.3s cubic-bezier(1, 0, 1, 1);
      background-color: #5b0909;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      position: relative;
      left: -0.9em;
      top: -0.90em;
      cursor: pointer;

      .light {
        animation: flicker 0.2s infinite 0.3s;
      }
    }

    .switch .light {
      opacity: 0;
      animation: light-off 1s;
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
    }

    .switch .dots {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
      background-size: 0;
      border-radius: 50%;
    }

    @keyframes flicker {
      0% {
        opacity: 1;
      }

      80% {
        opacity: 0.8;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes light-off {
      0% {
        opacity: 1;
      }

      80% {
        opacity: 0;
      }
    }

    .switch1 {
      display: block;
      position: relative;
      background-color: black;
      width: 70px;
      height: 70px;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
      border-radius: 50%;
      padding: 20px;
      margin: 5px;
    }

    .switch1 input {
      display: none;
    }

    //   .switch1 input:checked + .button .light {
    //     animation: flicker 0.2s infinite 0.3s;
    //   }

    .switch1 input:checked+.button .shine {
      opacity: 1;
    }

    .switch1 input:checked+.button .shadow {
      opacity: 0;
    }

    .switch1 .button {
      transition: all 0.3s cubic-bezier(1, 0, 1, 1);
      background-color: #949207;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      position: relative;
      left: -0.9em;
      top: -0.90em;
      cursor: pointer;
    }

    .switch1 .light {
      opacity: 0;
      animation: light-off 1s;
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%);
    }

    .switch1 .dots {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(transparent 30%, rgba(91, 101, 0, 0.7) 70%);
      background-size: 5px 5px;
      border-radius: 50%;
    }

    .switch2 {
      display: block;
      position: relative;
      background-color: black;
      width: 30px;
      height: 30px;
      box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
      border-radius: 50%;
      padding: 20px;
      margin: 5px;
    }

    .switch2 input {
      display: none;
    }

    //   .switch2 input:checked + .button .light {
    //     animation: flicker 0.2s infinite 0.3s;
    //   }

    //   .switch2 input:checked + .button .shine {
    //     opacity: 1;
    //   }

    .switch2 input:checked+.button .shadow {
      opacity: 0;
    }

    .switch2 .button {
      transition: all 0.2s cubic-bezier(1, 0, 1, 1);
      background-color: #223519;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      position: relative;
      left: -0.9em;
      top: -0.90em;
      cursor: pointer;

      .light {
        animation: flicker 0.2s infinite 0.3s;
      }
    }

    .switch2 .light {
      opacity: 0;
      animation: light-off 0.5s;
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(#e9ebd9, #15ff15  50%, transparent 70%);
    }

    .switch2 .dots {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(transparent 30%, #1c1e1c 70%);
      background-size:0;
      border-radius: 50%;
    }
  }
}